<template>
	<view class="coupon">
		<view class="nav flexJusp">
			<view @click="qiehuan(0)" :class="type==0?'xuan':''" style="text-align: center;width: 100rpx;">
				<view>全部</view>
				<view v-if="type==0" class="xian"></view>
			</view>
			<view @click="qiehuan(1)" :class="type==1?'xuan':''" style="text-align: center;width: 100rpx;">
				<view>待使用</view>
				<view v-if="type==1" class="xian"></view>
			</view>
			<view @click="qiehuan(2)" :class="type==2?'xuan':''" style="text-align: center;width: 100rpx;">
				<view>已使用</view>
				<view v-if="type==2" class="xian"></view>
			</view>
			<view @click="qiehuan(3)" :class="type==3?'xuan':''" style="text-align: center;width: 100rpx;">
				<view>已过期</view>
				<view v-if="type==3" class="xian"></view>
			</view>
		</view>
		<view v-for="(item,index) in list" :key="index" style="width: 710rpx;height: 240rpx;border-radius: 24rpx;margin:16rpx auto;position: relative;">
			<image v-if="item.status==1" style="width: 710rpx;height: 240rpx;" :src="this.$loadImage('coupon')"></image>
			<image v-if="item.status==2||item.status==3" style="width: 710rpx;height: 240rpx;" src="/static/image/01_3fxz.png"></image>
			<view class="flex" style="position: absolute;top:0;left:0;">
				<view style="width:484rpx;text-align: center;">
					<view style="font-size: 32rpx;font-weight: bold;padding:38rpx 0 10rpx;">{{item.title}}</view>
					<view class="flexJusp">
						<view></view>
						<view style="padding:2rpx 28rpx;background: #F0F0F0;border-radius: 20rpx;font-size: 24rpx;color: #666666;">满{{item.manprice||''}}减{{item.jianprice||''}}</view>
						<view></view>
					</view>
					<view style="font-size: 22rpx;color: #666666;margin-top:20rpx;">有效期：{{item.starttime.substring(0, 13)}}~{{item.endtime.substring(0, 13)}}</view>
				</view>
				<view style="text-align: center;width:226rpx;">
					<view style="font-size: 28rpx;font-weight: bold;color: #FFFFFF;padding:50rpx 0 26rpx;">￥<text style="font-size:50rpx;" v-if="item.kind==1">{{item.jianprice}}</text><text style="font-size:50rpx;" v-else>{{item.price}}</text> </view>
					<view v-if="item.status==1" class="buttons" @click="orders">立即使用</view>
					<view v-if="item.status==2" class="buttonx">已使用</view>
					<view v-if="item.status==3" class="buttonx">已过期</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				list:[{
					name:'优惠券名称',
					title:'满1000减200',
					time:'2021/02/06至2023/05/06',
					price:'10',
					status:0
				},{
					name:'优惠券名称1',
					title:'满1000减200',
					time:'2021/02/06至2023/05/06',
					price:'10',
					status:1
				},{
					name:'优惠券名称2',
					title:'满1000减200',
					time:'2021/02/06至2023/05/06',
					price:'10',
					status:2
				}],

			};
		},
		onLoad() {
			this.loads()
		},
		methods:{
			loads(){
				this.$httpapi('youhuiquan', 'POST', {flag:this.type}).then(res => {
					this.list = res.data
				})
			},
			orders(){
				uni.switchTab({
					url:'/pages/PlaceOrder/PlaceOrder'
				})
			},
			qiehuan(type){
				this.type = type
				this.loads()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F6FA;
	}
.coupon{
	.nav{
		padding:0 50rpx;
		width: 650rpx;
		height: 64rpx;
		line-height:58rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #333333;
		.xuan{
			font-size: 30rpx;
			font-weight: bold;
		}
		.xian{
			width: 88rpx;
			height: 6rpx;
			background: #2089FF;
			border-radius: 4rpx;
			margin: auto;
		}
	}
	.buttons{
		text-align: center;
		margin: auto;
		width: 146rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #F05B56;
		line-height: 50rpx;
	}
	.buttonx{
		text-align: center;
		margin: auto;
		width: 146rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #969696;
		line-height: 50rpx;
	}
}
</style>
